<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../static/css/bootstrap.min.css">
  <link rel="stylesheet" href="../static/css/js.css">
  <!-- <link rel="stylesheet" href="../static/css/popUP.css"> -->
</head>

<body>
  <!-- top -->
  <div class="tupian" style="position: absolute;height: 100%; width: 100%;z-index: -1;">
    <img src="../static/img/33.jpg" width="100%" height="100%">
  </div>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">学游网</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">用户</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </div>
  <!-- left -->
  <div id="left" id="left"
    style="height:100%;width:20% ; position: absolute;position:fixed; background-image: url(../static/img/24.jpg);background-repeat: no-repeat;background-size:100%;">
    <li
      style="list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%;background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <a href="#" style="color: lightsteelblue">菜单</a>
    </li>
    <li
      style="list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%;background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <input type="button" style="width: 100%;height: 100%;background: transparent;color: lightsteelblue;" value="提交"
        onclick="giT()">
    </li>

    <li
      style="list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%; background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <button id="myNEW" style="width: 100%;height: 100%;background: transparent;color: lightsteelblue;"
        @click="again()">重新写</button>
    </li>

    <li
      style="list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%;background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <input type="button" id="Telling" style="width: 100%;height: 100%;background: transparent;color: lightsteelblue;"
        value="说明" @click="Telling">
    </li>

    <li
      style="list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%;background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <a href="#" style="color: lightsteelblue" @click="staff">工作人员入口</a>
    </li>

    <li
      style=" list-style:none;height: 10%;width: 90%;  margin-left: 5%;margin-top: 4%;background-image: url(../static/img/15.jpg);background-repeat: no-repeat;background-size:100%;font-size: 30px; text-align: center;">
      <button @click="logout"
        style="width: 100%;height: 100%;background: transparent;color: lightsteelblue;">退出</button>
    </li>

  </div>
  <!-- 打开弹窗按钮 -->


  <!-- 弹窗 
  <div id="myModal" class="modal">

    <div class="modal-content">
      <span class="close">&times;</span>
      <p>数字越大代表你越满意</p>
    </div>
  </div>-->


  <!-- rigeht -->
  <div id="rigeht" style=" background-color: aqua;width: 100%;height: 100%;">
    
    {% for msg in msgsi %}
    <div id="app"
      style="float:right;width: 70%; background-color: rgba(183, 222, 231, 0.3); height: 6rem;margin-bottom: 1%;">
        <h2>{{msg.content}}</h2>
        
      <!-- 如果要多选那么绑定的字符要是数组，并且添加 multiple 在多选框上 -->
      <select v-model="selectA"  name='electronicId' @change="varC" style="height: 2rem;margin-bottom: 1%;" class="newValue">
        <!-- 默认的查看 disabled -->
        <option disabled value="">请输入</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
      
    </div>
    
    {% endfor %}

  </div>


  <script src="../static/js/jquery-3.6.0.min.js"></script>
  <script src="../static/js/bootstrap.min.js"></script>
  <!-- <script src="../static/js/popUP.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script>
    //vue
    let left = new Vue({
      el: "#left",
      data: {
        ct: "退出"
      },
      methods: {
        //重新写
        again: function () {
          var Holl=$('select').prop('selectedIndex', 0);
          console.log(Holl);
        },
        //退出
        getUP: function () {
          this.cookic = ""
          window.location.href = "/login"
        },
        
        Telling: function () {
          alert('分数越高越正面，填完记得保存哦')
        },
        //工作人员
        staff:function() {
       window.location.href="/menu"
        },
        //注销
        logout: function (){
      console.log(10);
            axios({
                    method: 'get',
                    url: '/logout2'
                }).then(function (response) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    let res=response.data;
                    if(res.code===200){
                        window.location.href='/';
                    }
                }).catch((err) => {
                    console.log("没有200");
                });
        }
      }
    })
    //提交
    function giT () {
      console.log(101);
          let val=[]
          var q = $("select[name='electronicId']")
          console.log(q);
          q.each(function(i,itme){
            val.push($("select")[i].value)
          })
          console.log(val);
          let item=val.reduce(function(x,y){
             let x1=Number(x) ; let y1=Number(y)
            return x1+y1
          })
          console.log(item);
          
          axios({
            method:'post',
            url:'/aggregate',
            
            data:{
              time:item
              }
            
          
          })



        }
    function Tellme(){
      axios({
        method:'get',
        URL:'/Tellme'

      }).then(function (response) {
        if(response>0){
          console.log("成功了");
        }else{
          console.log("失败");
        }
      }).catch((err) => {
            console.log("没有2001");
                });

    }
   
   
  </script>

</body>

</html>